<!--
  Author: 善良的YWJ
  Created by shanliangdeYWJ on 2020/09/09
  File: 05.3解决异步设置值每个组件都是独立的.html
  Description: "
  
   请输入文件描述内容
  
               " 
  Github: https://github.com/shanliangdeYWJ
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <title>06.2ES6声明事件</title>
  <style></style>
</head>

<body>
  <!-- 这是 react渲染到页面上的结点 可以创建多个节点 -->
  <div id="root"></div>
  <!-- <button>122</button> -->

  <!-- 加载 React。-->
  <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
  <script src="../js/react@16.development.js" crossorigin></script>
  <script src="../js/react-dom@16.development.js" crossorigin></script>
  <script src="../js/babel@6.min.js"></script>


  <!-- 加载我们的 React 组件。-->
  <script type="text/babel">
    // ### 事件处理
    // - React 事件的命名采用小驼峰式（camelCase），而不是纯小写

    class Toggle extends React.Component {
      constructor(props) {
        super(props);
        this.state = { isToggleOn: true };

        // - 为了在回调中使用 `this` ，这个绑定必不可少
        this.handleClick = this.handleClick.bind(this);
      }
      handleClick(e) {
        // 这里 `回调函数` 的 state 是通过 定义 handleClick时候把 handleClick 的 this 绑定到 Toggle 类 的this上才能访问到的
        this.setState((state) => ({ isToggleOn: !state.isToggleOn }));
        console.log('this is:', this);
      }
      render() {
        return (
          // 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。
          <button href="#" onClick={this.handleClick} >
            Click Me !{this.state.isToggleOn ? 'NO' : 'OFF'}
          </button>
        )
      }
    }

    ReactDOM.render(
      <Toggle />,
      document.getElementById('root')
    );
  </script>
</body>

</html>